// // import React, { useEffect, useState } from 'react';
// // import {
// //     fetchGroups,
// //     fetchDocumentsByGroup,
// //     fetchDocumentContent,
// //     saveGroups,
// //     saveDocument// 新增更新文档内容的API
// // } from '../api/group'; // 确保更新了group.js中的API
// // import { Collapse, List, Spin, Button, Tooltip, Modal, Form, Input } from 'antd';
// // import { PlusOutlined, FolderAddOutlined, FileAddOutlined, EditOutlined } from '@ant-design/icons';
// // import 'antd/dist/reset.css';
// // import 'highlight.js/styles/github-dark.min.css';
// // import { marked } from 'marked';
// // import { markedHighlight } from 'marked-highlight';
// // import hljs from 'highlight.js';
// // import '../assets/css/DocGroupView.css'; // 新增样式文件
// //
// // interface DGroup {
// //     id: string;
// //     title: string;
// //     baseId: string;
// //     sortOrder: number;
// // }
// //
// // interface Document {
// //     id: string;
// //     groupId: string;
// //     baseId: string;
// //     content: string;
// //     title?: string;
// //     sortOrder: number;
// // }
// //
// // interface PageParams {
// //     baseId: string;
// //     current: number;
// //     size: number;
// // }
// //
// //
// // marked.use(
// //     markedHighlight({
// //         highlight(code: string, lang: string) {
// //             const language = hljs.getLanguage(lang) ? lang : 'plaintext';
// //             return hljs.highlight(code, { language }).value;
// //         }
// //     })
// // );
// //
// // const DocGroupView = () => {
// //     const [groups, setGroups] = useState<DGroup[]>([]);
// //     const [docs, setDocs] = useState<Record<string, Document[]>>({});
// //     const [activeGroup, setActiveGroup] = useState<string | null>(null);
// //     const [activeDoc, setActiveDoc] = useState<Document | null>(null);
// //     const [docContent, setDocContent] = useState<string>('');
// //     const [loadingDoc, setLoadingDoc] = useState<boolean>(false);
// //
// //     // 新增状态
// //     const [groupModalVisible, setGroupModalVisible] = useState(false);
// //     const [documentModalVisible, setDocumentModalVisible] = useState(false);
// //     const [groupForm] = Form.useForm();
// //     const [documentForm] = Form.useForm();
// //     const [loading, setLoading] = useState(false);
// //
// //     // 新增编辑状态
// //     const [editing, setEditing] = useState(false);
// //     const [editingContent, setEditingContent] = useState('');
// //
// //     const [pageParams] = useState<PageParams>({
// //         baseId: "d604f6c5a88adada1bee2f87b",
// //         current: 1,
// //         size: 5
// //     });
// //
// //     useEffect(() => {
// //         const loadGroups = async () => {
// //             try {
// //                 setLoading(true);
// //                 const response = await fetchGroups(pageParams);
// //                 if (response && response.records) {
// //                     setGroups(response.records);
// //                 } else if (Array.isArray(response)) {
// //                     setGroups(response);
// //                 } else {
// //                     console.error("Invalid groups response:", response);
// //                     setGroups([]);
// //                 }
// //             } catch (error) {
// //                 console.error("Failed to fetch groups:", error);
// //                 setGroups([]);
// //             } finally {
// //                 setLoading(false);
// //             }
// //         };
// //         loadGroups();
// //     }, [pageParams]);
// //
// //     const handleGroupChange = (groupId: string) => {
// //         setActiveGroup(groupId);
// //         if (!docs[groupId]) {
// //             fetchDocumentsByGroup(groupId).then(list => {
// //                 setDocs(prev => ({ ...prev, [groupId]: list || [] }));
// //             });
// //         }
// //     };
// //
// //     const handleDocClick = (doc: Document) => {
// //         setActiveDoc(doc);
// //         setLoadingDoc(true);
// //         setEditing(false); // 切换文档时退出编辑模式
// //         fetchDocumentContent(doc.id).then(content => {
// //             setDocContent(content || 'No content available');
// //             setLoadingDoc(false);
// //         });
// //     };
// //
// //     // 添加文档分组处理函数
// //     const handleAddGroup = () => {
// //         setGroupModalVisible(true);
// //     };
// //
// //     // 提交文档分组
// //     const handleGroupSubmit = async () => {
// //         try {
// //             const values = await groupForm.validateFields();
// //             setLoading(true);
// //
// //             const newGroup: Partial<DGroup> = {
// //                 title: values.title,
// //                 baseId: pageParams.baseId,
// //                 sortOrder: groups.length + 1
// //             };
// //
// //             const createdGroup = await saveGroups(newGroup);
// //             setGroups(prev => [...prev, createdGroup]);
// //
// //             setGroupModalVisible(false);
// //             groupForm.resetFields();
// //         } catch (error) {
// //             console.error("Failed to create group:", error);
// //         } finally {
// //             setLoading(false);
// //         }
// //     };
// //
// //     // 添加文档处理函数
// //     const handleAddDocument = () => {
// //         if (!activeGroup) {
// //             console.warn('请先选择一个分组');
// //             return;
// //         }
// //         setDocumentModalVisible(true);
// //     };
// //
// //     // 提交文档
// //     const handleDocumentSubmit = async () => {
// //         try {
// //             const values = await documentForm.validateFields();
// //             setLoading(true);
// //
// //             const newDocument: Partial<Document> = {
// //                 title: values.title,
// //                 content: values.content || '# 新文档\n请在此编辑内容',
// //                 groupId: activeGroup!,
// //                 baseId: pageParams.baseId,
// //                 sortOrder: docs[activeGroup!]?.length || 0
// //             };
// //
// //             const createdDocument = await saveDocument(newDocument);
// //
// //             // 确保返回的文档对象有必要的字段
// //             const completeDocument = {
// //                 ...createdDocument,
// //                 title: createdDocument.title || '未命名文档',
// //                 id: createdDocument.id || Date.now().toString()
// //             };
// //
// //             // 更新文档列表
// //             setDocs(prev => ({
// //                 ...prev,
// //                 [activeGroup!]: [...(prev[activeGroup!] || []), completeDocument]
// //             }));
// //
// //             setDocumentModalVisible(false);
// //             documentForm.resetFields();
// //         } catch (error) {
// //             console.error("Failed to create document:", error);
// //         } finally {
// //             setLoading(false);
// //         }
// //     };
// //
// //     // 处理编辑/更新操作
// //     const handleEditToggle = () => {
// //         if (editing) {
// //             // 更新模式 - 保存内容
// //             if (!activeDoc) return;
// //
// //             setLoadingDoc(true);
// //             // 创建一个新的文档对象，包含更新的内容和原始文档的其他属性
// //             const updatedDoc: Document = {
// //                 ...activeDoc,
// //                 content: editingContent
// //             };
// //
// //             // 调用saveDocument传入整个文档对象（包含ID）
// //             saveDocument(updatedDoc)
// //                 .then(() => {
// //                     setDocContent(editingContent);
// //                     setEditing(false);
// //
// //                     // 更新当前活动文档的状态
// //                     setActiveDoc(updatedDoc);
// //
// //                     // 如果需要，可以在这里更新文档列表状态
// //                 })
// //                 .catch(error => {
// //                     console.error("更新文档失败:", error);
// //                 })
// //                 .finally(() => {
// //                     setLoadingDoc(false);
// //                 });
// //         } else {
// //             // 进入编辑模式
// //             setEditingContent(docContent);
// //             setEditing(true);
// //         }
// //     };
// //
// //     return (
// //         <div style={{ display: 'flex', height: '100vh', background: '#f5f7fa' }}>
// //             {/* 左侧分组目录 */}
// //             <div style={{
// //                 width: 300,
// //                 background: '#fff',
// //                 borderRight: '1px solid #eee',
// //                 overflowY: 'auto',
// //                 display: 'flex',
// //                 flexDirection: 'column'
// //             }}>
// //                 {/* 顶部按钮栏 */}
// //                 <div style={{
// //                     padding: '12px 16px',
// //                     borderBottom: '1px solid #eee',
// //                     display: 'flex',
// //                     justifyContent: 'flex-end'
// //                 }}>
// //                     <Tooltip title="添加文档分组">
// //                         <Button
// //                             type="primary"
// //                             icon={<FolderAddOutlined />}
// //                             onClick={handleAddGroup}
// //                         >
// //                             分组
// //                         </Button>
// //                     </Tooltip>
// //                 </div>
// //
// //                 {/* 分组列表 */}
// //                 {groups.length === 0 ? (
// //                     <div style={{ padding: 16, textAlign: 'center', flex: 1 }}>
// //                         <Spin tip="加载分组中..." />
// //                     </div>
// //                 ) : (
// //                     <Collapse
// //                         accordion
// //                         onChange={(key) => {
// //                             if (Array.isArray(key)) {
// //                                 if (key.length > 0) handleGroupChange(key[0]);
// //                             } else {
// //                                 handleGroupChange(key);
// //                             }
// //                         }}
// //                         style={{ border: 'none', flex: 1 }}
// //                     >
// //                         {groups.map(group => (
// //                             <Collapse.Panel
// //                                 header={group.title}
// //                                 key={group.id}
// //                                 extra={
// //                                     <Tooltip title="在此分组中添加文档">
// //                                         <Button
// //                                             type="text"
// //                                             icon={<PlusOutlined />}
// //                                             size="small"
// //                                             onClick={(e) => {
// //                                                 e.stopPropagation();
// //                                                 setActiveGroup(group.id);
// //                                                 handleAddDocument();
// //                                             }}
// //                                         />
// //                                     </Tooltip>
// //                                 }
// //                             >
// //                                 <List
// //                                     dataSource={docs[group.id] || []}
// //                                     renderItem={(item: Document) => (
// //                                         <List.Item
// //                                             style={{
// //                                                 cursor: 'pointer',
// //                                                 color: activeDoc?.id === item.id ? '#1677ff' : undefined
// //                                             }}
// //                                             onClick={() => handleDocClick(item)}
// //                                         >
// //                                             {item.title || `文档_${item.id?.slice(-4) || '新文档'}`}
// //                                         </List.Item>
// //                                     )}
// //                                 />
// //                             </Collapse.Panel>
// //                         ))}
// //                     </Collapse>
// //                 )}
// //             </div>
// //
// //             {/* 右侧文档内容 */}
// //             <div style={{
// //                 flex: 1,
// //                 display: 'flex',
// //                 flexDirection: 'column',
// //                 background: '#fff'
// //             }}>
// //                 {/* 新增导航栏 */}
// //                 <div style={{
// //                     padding: '12px 24px',
// //                     borderBottom: '1px solid #eee',
// //                     display: 'flex',
// //                     justifyContent: 'space-between',
// //                     alignItems: 'center',
// //                     background: '#fafafa'
// //                 }}>
// //                     <div style={{ fontWeight: 'bold', fontSize: 16 }}>
// //                         {activeDoc ? (activeDoc.title || '未命名文档') : '请选择文档'}
// //                     </div>
// //                     {activeDoc && (
// //                         <Button
// //                             type={editing ? 'default' : 'primary'}
// //                             icon={<EditOutlined />}
// //                             onClick={handleEditToggle}
// //                             disabled={loadingDoc}
// //                         >
// //                             {editing ? '更新' : '编辑'}
// //                         </Button>
// //                     )}
// //                 </div>
// //
// //                 {/* 文档内容区域 */}
// //                 <div style={{
// //                     flex: 1,
// //                     padding: 32,
// //                     overflowY: 'auto',
// //                     textAlign: 'left'
// //                 }}>
// //                     {loadingDoc ? (
// //                         <div style={{ textAlign: 'center', padding: 40 }}>
// //                             <Spin size="large" />
// //                         </div>
// //                     ) : editing ? (
// //                         <Input.TextArea
// //                             value={editingContent}
// //                             onChange={e => setEditingContent(e.target.value)}
// //                             style={{ height: '100%', width: '100%', fontFamily: 'monospace' }}
// //                             placeholder="输入Markdown格式的内容..."
// //                         />
// //                     ) : (
// //                         <div
// //                             className="markdown-body"
// //                             style={{ textAlign: 'left' }}
// //                             dangerouslySetInnerHTML={{ __html: marked.parse(docContent) as string }}
// //                         />
// //                     )}
// //                 </div>
// //             </div>
// //
// //             {/* 添加分组模态框 */}
// //             <Modal
// //                 title="新建文档分组"
// //                 open={groupModalVisible}
// //                 onOk={handleGroupSubmit}
// //                 onCancel={() => setGroupModalVisible(false)}
// //                 confirmLoading={loading}
// //             >
// //                 <Form form={groupForm} layout="vertical">
// //                     <Form.Item
// //                         name="title"
// //                         label="分组名称"
// //                         rules={[{ required: true, message: '请输入分组名称' }]}
// //                     >
// //                         <Input placeholder="请输入分组名称" />
// //                     </Form.Item>
// //                 </Form>
// //             </Modal>
// //
// //             {/* 添加文档模态框 */}
// //             <Modal
// //                 title="新建文档"
// //                 open={documentModalVisible}
// //                 onOk={handleDocumentSubmit}
// //                 onCancel={() => setDocumentModalVisible(false)}
// //                 confirmLoading={loading}
// //                 width={600}
// //             >
// //                 <Form form={documentForm} layout="vertical">
// //                     <Form.Item
// //                         name="title"
// //                         label="文档标题"
// //                         rules={[{ required: true, message: '请输入文档标题' }]}
// //                     >
// //                         <Input placeholder="请输入文档标题" />
// //                     </Form.Item>
// //                     <Form.Item
// //                         name="content"
// //                         label="文档内容 (Markdown格式)"
// //                         rules={[{ required: true, message: '请输入文档内容' }]}
// //                     >
// //                         <Input.TextArea
// //                             placeholder="请输入Markdown格式的文档内容"
// //                             rows={10}
// //                             style={{ fontFamily: 'monospace' }}
// //                         />
// //                     </Form.Item>
// //                 </Form>
// //             </Modal>
// //         </div>
// //     );
// // };
// //
// // export default DocGroupView;
// import React, {useEffect, useState, useRef} from 'react';
// import {
//     fetchGroups,
//     saveGroups
// } from '../api/group';
// import {
//     fetchDocumentsByGroup,
//     fetchDocumentContent,
//     saveDocument
// } from '../api/document';
// import {Collapse, List, Spin, Button, Tooltip, Modal, Form, Input, message} from 'antd';
// import {PlusOutlined, FolderAddOutlined, EditOutlined, DownOutlined} from '@ant-design/icons';
// import 'antd/dist/reset.css';
// import 'highlight.js/styles/github-dark.min.css';
// import {marked} from 'marked';
// import {markedHighlight} from 'marked-highlight';
// import hljs from 'highlight.js';
// import '../assets/css/DocGroupView.css';
// import { Upload, UploadProps } from 'antd';
// import { InboxOutlined } from '@ant-design/icons';

// interface DGroup {
//     id: string;
//     title: string;
//     baseId: string;
//     sortOrder: number;
// }

// interface Document {
//     id: string;
//     groupId: string;
//     baseId: string;
//     content: string;
//     title?: string;
//     sortOrder: number;
// }

// interface PageParams {
//     baseId: string;
//     current: number;
//     size: number;
// }

// marked.use(
//     markedHighlight({
//         highlight(code: string, lang: string) {
//             const language = hljs.getLanguage(lang) ? lang : 'plaintext';
//             return hljs.highlight(code, {language}).value;
//         }
//     })
// );


// const DocGroupView = () => {
//     const [groups, setGroups] = useState<DGroup[]>([]);
//     const [docs, setDocs] = useState<Record<string, Document[]>>({});
//     const [activeGroup, setActiveGroup] = useState<string | null>(null);
//     const [activeDoc, setActiveDoc] = useState<Document | null>(null);
//     const [docContent, setDocContent] = useState<string>('');
//     const [loadingDoc, setLoadingDoc] = useState<boolean>(false);

//     // 新增状态
//     const [groupModalVisible, setGroupModalVisible] = useState(false);
//     const [documentModalVisible, setDocumentModalVisible] = useState(false);
//     const [groupForm] = Form.useForm();
//     const [documentForm] = Form.useForm();
//     const [loading, setLoading] = useState(false);

//     // 新增编辑状态
//     const [editing, setEditing] = useState(false);
//     const [editingContent, setEditingContent] = useState('');
//     const [parsedEditingContent, setParsedEditingContent] = useState('');
//     const [parsedDocContent, setParsedDocContent] = useState('');

//     // 新增导入文档相关状态
//     const [importModalVisible, setImportModalVisible] = useState(false);
//     const [importForm] = Form.useForm();
//     const [fileList, setFileList] = useState<any[]>([]);
//     const [importLoading, setImportLoading] = useState(false);

//     // ... 其他代码保持不变 ...

//     // 处理导入文档
//     const handleImportDocument = () => {
//         if (!activeGroup) {
//             message.warning('请先选择一个分组');
//             return;
//         }
//         setImportModalVisible(true);
//     };

//     // 提交导入的文档
//     const handleImportSubmit = async () => {
//         if (!fileList.length) {
//             message.warning('请选择要导入的文件');
//             return;
//         }

//         try {
//             setImportLoading(true);
//             // 此时fileList[0].originFileObj是有效的File（Blob）对象
//             const file = fileList[0].originFileObj;

//             // 读取文件内容（此时不会再报错）
//             const content = await readFileContent(file);

//             // 从文件名中提取标题（去掉扩展名）
//             const fileName = file.name;
//             const title = fileName.replace(/\.md$/i, '');

//             // 创建新文档
//             const newDocument: Partial<Document> = {
//                 title: title,
//                 content: content,
//                 groupId: activeGroup!,
//                 baseId: pageParams.baseId,
//                 sortOrder: docs[activeGroup!]?.length || 0
//             };

//             // 保存到后端
//             const createdDocument = await saveDocument(newDocument);

//             // 更新UI
//             const completeDocument = {
//                 ...createdDocument,
//                 title: title,
//                 id: createdDocument.id || Date.now().toString()
//             };

//             setDocs(prev => ({
//                 ...prev,
//                 [activeGroup!]: [...(prev[activeGroup!] || []), completeDocument]
//             }));

//             message.success('文档导入成功');
//             setImportModalVisible(false);
//             setFileList([]);
//             importForm.resetFields();
//         } catch (error) {
//             console.error("导入文档失败:", error);
//             message.error('导入文档失败');
//         } finally {
//             setImportLoading(false);
//         }
//     };

//     // 读取文件内容的辅助函数
//     const readFileContent = (file: File): Promise<string> => {
//         return new Promise((resolve, reject) => {
//             const reader = new FileReader();
//             reader.onload = (event) => {
//                 if (event.target?.result) {
//                     resolve(event.target.result as string);
//                 } else {
//                     reject(new Error('无法读取文件内容'));
//                 }
//             };
//             reader.onerror = () => {
//                 reject(new Error('文件读取错误'));
//             };
//             reader.readAsText(file);
//         });
//     };

//     // 上传组件的props
//     const uploadProps: UploadProps = {
//         onRemove: () => {
//             setFileList([]);
//             return true;
//         },
//         beforeUpload: (file) => {
//             // 只允许上传.md文件
//             const isMd = file.name.toLowerCase().endsWith('.md');
//             if (!isMd) {
//                 message.error('只能上传Markdown文件 (.md)');
//                 return Upload.LIST_IGNORE;
//             }

//             // 限制文件大小 (2MB)
//             const isLt2M = file.size / 1024 / 1024 < 2;
//             if (!isLt2M) {
//                 message.error('文件大小不能超过2MB');
//                 return Upload.LIST_IGNORE;
//             }

//             // 关键修复：保存原始File对象到originFileObj属性
//             setFileList([{
//                 uid: file.uid,  // 保留唯一标识
//                 name: file.name,
//                 status: 'done',
//                 originFileObj: file  // 存储原始File对象（Blob类型）
//             }]);
//             return false; // 手动处理上传
//         },
//         fileList,
//         maxCount: 1,
//         accept: '.md',
//     };

//     // 新增分页状态
//     const [pagination, setPagination] = useState({
//         current: 1,
//         pageSize: 5,
//         total: 0,
//         hasMore: true
//     });

//     const [loadingMore, setLoadingMore] = useState(false);
//     const groupsContainerRef = useRef<HTMLDivElement>(null);

//     const [pageParams] = useState<PageParams>({
//         baseId: "d604f6c5a88adada1bee2f87b",
//         current: 1,
//         size: 5
//     });

//     // 加载分组数据
//     const loadGroups = async (page = 1, append = false) => {
//         try {
//             setLoadingMore(true);
//             const params = {...pageParams, current: page, size: pagination.pageSize};
//             const response = await fetchGroups(params);

//             if (response && response.records) {
//                 const newGroups = response.records || [];
//                 setGroups(prev => append ? [...prev, ...newGroups] : newGroups);

//                 setPagination(prev => ({
//                     ...prev,
//                     current: page,
//                     total: response.total || 0,
//                     hasMore: (response.records?.length || 0) >= pagination.pageSize
//                 }));
//             } else {
//                 console.error("Invalid groups response:", response);
//                 setGroups([]);
//             }
//         } catch (error) {
//             console.error("Failed to fetch groups:", error);
//             message.error('加载分组失败');
//         } finally {
//             setLoadingMore(false);
//             setLoading(false);
//         }
//     };

//     useEffect(() => {
//         loadGroups(1, false);
//     }, []);

//     // 处理滚动加载
//     useEffect(() => {
//         const container = groupsContainerRef.current;
//         if (!container) return;

//         const handleScroll = () => {
//             if (!pagination.hasMore || loadingMore) return;

//             const {scrollTop, scrollHeight, clientHeight} = container;
//             const isBottom = scrollTop + clientHeight >= scrollHeight - 50;

//             if (isBottom) {
//                 loadGroups(pagination.current + 1, true);
//             }
//         };

//         container.addEventListener('scroll', handleScroll);
//         return () => container.removeEventListener('scroll', handleScroll);
//     }, [pagination, loadingMore]);

//     useEffect(() => {
//         try {
//             setParsedEditingContent(marked.parse(editingContent || '') as string);
//         } catch (error) {
//             console.error("Markdown解析错误:", error);
//             setParsedEditingContent("<div>解析错误</div>");
//         }
//     }, [editingContent]);

//     useEffect(() => {
//         try {
//             setParsedDocContent(marked.parse(docContent || '') as string);
//         } catch (error) {
//             console.error("Markdown解析错误:", error);
//             setParsedDocContent("<div>解析错误</div>");
//         }
//     }, [docContent]);

//     const handleGroupChange = (groupId: string) => {
//         setActiveGroup(groupId);
//         if (!docs[groupId]) {
//             fetchDocumentsByGroup(groupId).then(list => {
//                 setDocs(prev => ({...prev, [groupId]: list || []}));
//             });
//         }
//     };

//     const handleDocClick = (doc: Document) => {
//         setActiveDoc(doc);
//         setLoadingDoc(true);
//         setEditing(false); // 切换文档时退出编辑模式
//         fetchDocumentContent(doc.id).then(content => {
//             setDocContent(content || 'No content available');
//             setLoadingDoc(false);
//         });
//     };

//     // 添加文档分组处理函数
//     const handleAddGroup = () => {
//         setGroupModalVisible(true);
//     };

//     // 提交文档分组
//     const handleGroupSubmit = async () => {
//         try {
//             const values = await groupForm.validateFields();
//             setLoading(true);

//             const newGroup: Partial<DGroup> = {
//                 title: values.title,
//                 baseId: pageParams.baseId,
//                 sortOrder: groups.length + 1
//             };

//             const createdGroup = await saveGroups(newGroup);
//             setGroups(prev => [...prev, createdGroup]);
//             message.success('分组创建成功');

//             setGroupModalVisible(false);
//             groupForm.resetFields();
//         } catch (error) {
//             console.error("Failed to create group:", error);
//             message.error('创建分组失败');
//         } finally {
//             setLoading(false);
//         }
//     };

//     // 添加文档处理函数
//     const handleAddDocument = () => {
//         if (!activeGroup) {
//             message.warning('请先选择一个分组');
//             return;
//         }
//         setDocumentModalVisible(true);
//     };

//     // 提交文档
//     const handleDocumentSubmit = async () => {
//         try {
//             const values = await documentForm.validateFields();
//             setLoading(true);

//             const newDocument: Partial<Document> = {
//                 title: values.title,
//                 content: values.content || '# 新文档\n请在此编辑内容',
//                 groupId: activeGroup!,
//                 baseId: pageParams.baseId,
//                 sortOrder: docs[activeGroup!]?.length || 0
//             };

//             const createdDocument = await saveDocument(newDocument);

//             // 确保返回的文档对象有必要的字段
//             const completeDocument = {
//                 ...createdDocument,
//                 title: createdDocument.title || '未命名文档',
//                 id: createdDocument.id || Date.now().toString()
//             };

//             // 更新文档列表
//             setDocs(prev => ({
//                 ...prev,
//                 [activeGroup!]: [...(prev[activeGroup!] || []), completeDocument]
//             }));

//             message.success('文档创建成功');
//             setDocumentModalVisible(false);
//             documentForm.resetFields();
//         } catch (error) {
//             console.error("Failed to create document:", error);
//             message.error('创建文档失败');
//         } finally {
//             setLoading(false);
//         }
//     };

//     // 处理编辑/更新操作
//     const handleEditToggle = () => {
//         if (editing) {
//             // 更新模式 - 保存内容
//             if (!activeDoc) return;

//             setLoadingDoc(true);
//             // 创建一个新的文档对象，包含更新的内容和原始文档的其他属性
//             const updatedDoc: Document = {
//                 ...activeDoc,
//                 content: editingContent
//             };

//             // 调用saveDocument传入整个文档对象（包含ID）
//             saveDocument(updatedDoc)
//                 .then(() => {
//                     setDocContent(editingContent);
//                     setEditing(false);
//                     message.success('文档更新成功');

//                     // 更新当前活动文档的状态
//                     setActiveDoc(updatedDoc);

//                     // 更新文档列表中的内容
//                     setDocs(prev => {
//                         const groupDocs = prev[activeDoc.groupId] || [];
//                         const updatedGroupDocs = groupDocs.map(doc =>
//                             doc.id === activeDoc.id ? updatedDoc : doc
//                         );

//                         return {
//                             ...prev,
//                             [activeDoc.groupId]: updatedGroupDocs
//                         };
//                     });
//                 })
//                 .catch(error => {
//                     console.error("更新文档失败:", error);
//                     message.error('文档更新失败');
//                 })
//                 .finally(() => {
//                     setLoadingDoc(false);
//                 });
//         } else {
//             // 进入编辑模式
//             setEditingContent(docContent);
//             setEditing(true);
//         }
//     };

//     // 手动加载更多分组
//     const handleLoadMore = () => {
//         if (!loadingMore && pagination.hasMore) {
//             loadGroups(pagination.current + 1, true);
//         }
//     };

//     return (
//         <div style={{display: 'flex', height: '100vh', background: '#f5f7fa'}}>
//             {/* 左侧分组目录 */}
//             <div
//                 ref={groupsContainerRef}
//                 style={{
//                     width: 300,
//                     background: '#fff',
//                     borderRight: '1px solid #eee',
//                     overflowY: 'auto',
//                     display: 'flex',
//                     flexDirection: 'column'
//                 }}
//             >
//                 {/* 顶部按钮栏 */}
//                 <div style={{
//                     padding: '12px 16px',
//                     borderBottom: '1px solid #eee',
//                     display: 'flex',
//                     justifyContent: 'flex-end'
//                 }}>
//                     <Tooltip title="添加文档分组">
//                         <Button
//                             type="primary"
//                             icon={<FolderAddOutlined/>}
//                             onClick={handleAddGroup}
//                         >
//                             分组
//                         </Button>
//                     </Tooltip>
//                 </div>

//                 {/* 分组列表 */}
//                 {groups.length === 0 ? (
//                     <div style={{padding: 16, textAlign: 'center', flex: 1}}>
//                         <Spin tip="加载分组中..."/>
//                     </div>
//                 ) : (
//                     <div style={{flex: 1, overflowY: 'auto'}}>
//                         <Collapse
//                             accordion
//                             onChange={(key) => {
//                                 if (Array.isArray(key)) {
//                                     if (key.length > 0) handleGroupChange(key[0]);
//                                 } else {
//                                     handleGroupChange(key);
//                                 }
//                             }}
//                             style={{border: 'none'}}
//                         >
//                             {groups.map(group => (
//                                 <Collapse.Panel
//                                     header={group.title}
//                                     key={group.id}
//                                     extra={
//                                         <Tooltip title="在此分组中添加文档">
//                                             <Button
//                                                 type="text"
//                                                 icon={<PlusOutlined/>}
//                                                 size="small"
//                                                 onClick={(e) => {
//                                                     e.stopPropagation();
//                                                     setActiveGroup(group.id);
//                                                     handleAddDocument();
//                                                 }}
//                                             />
//                                         </Tooltip>
//                                     }
//                                 >
//                                     <List
//                                         dataSource={docs[group.id] || []}
//                                         renderItem={(item: Document) => (
//                                             <List.Item
//                                                 style={{
//                                                     cursor: 'pointer',
//                                                     color: activeDoc?.id === item.id ? '#1677ff' : undefined
//                                                 }}
//                                                 onClick={() => handleDocClick(item)}
//                                             >
//                                                 {item.title || `文档_${item.id?.slice(-4) || '新文档'}`}
//                                             </List.Item>
//                                         )}
//                                     />
//                                 </Collapse.Panel>
//                             ))}
//                         </Collapse>

//                         {/* 加载更多按钮 */}
//                         <div style={{padding: '16px', textAlign: 'center'}}>
//                             {loadingMore ? (
//                                 <Spin tip="加载更多分组..."/>
//                             ) : pagination.hasMore ? (
//                                 <Button
//                                     type="dashed"
//                                     onClick={handleLoadMore}
//                                     icon={<DownOutlined/>}
//                                     block
//                                 >
//                                     加载更多
//                                 </Button>
//                             ) : (
//                                 <div style={{color: '#999', padding: '8px'}}>
//                                     没有更多分组了
//                                 </div>
//                             )}
//                         </div>
//                     </div>
//                 )}
//             </div>

//             <div style={{
//                 flex: 1,
//                 display: 'flex',
//                 flexDirection: 'column',
//                 background: '#fff'
//             }}>
//                 {/* 修改导航栏：添加导入按钮 */}
//                 <div style={{
//                     padding: '12px 24px',
//                     borderBottom: '1px solid #eee',
//                     display: 'flex',
//                     justifyContent: 'space-between',
//                     alignItems: 'center',
//                     background: '#fafafa'
//                 }}>
//                     <div style={{fontWeight: 'bold', fontSize: 16}}>
//                         {activeDoc ? (activeDoc.title || '未命名文档') : '请选择文档'}
//                     </div>

//                     <div>
//                         {activeDoc ? (
//                             <Button
//                                 type={editing ? 'default' : 'primary'}
//                                 icon={<EditOutlined/>}
//                                 onClick={handleEditToggle}
//                                 disabled={loadingDoc}
//                                 style={{ marginRight: 8 }}
//                             >
//                                 {editing ? '更新' : '编辑'}
//                             </Button>
//                         ) : null}

//                         <Button
//                             type="dashed"
//                             icon={<FolderAddOutlined />}
//                             onClick={handleImportDocument}
//                         >
//                             导入文档
//                         </Button>
//                     </div>
//                 </div>
//                 {/* 右侧文档内容 */}
//                 <div style={{
//                     flex: 1,
//                     padding: 32,
//                     overflowY: 'auto',
//                     display: 'flex', // 添加flex布局以居中内容
//                     justifyContent: 'center' // 内容水平居中
//                 }}>
//                     {loadingDoc ? (
//                         <div style={{textAlign: 'center', padding: 40}}>
//                             <Spin size="large"/>
//                         </div>
//                     ) : editing ? (
//                         // 编辑模式：左右分栏布局（保持原样）
//                         <div style={{
//                             display: 'flex',
//                             height: '100%',
//                             width: '100%', // 占据全部可用宽度
//                             gap: 24,
//                             background: '#fff'
//                         }}>
//                             {/* Markdown编辑区 */}
//                             <div style={{
//                                 flex: 1,
//                                 border: '1px solid #e8e8e8',
//                                 borderRadius: 8,
//                                 overflow: 'hidden',
//                                 boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
//                             }}>
//                                 <div style={{
//                                     padding: '8px 16px',
//                                     background: '#fafafa',
//                                     borderBottom: '1px solid #eee',
//                                     fontWeight: 500
//                                 }}>
//                                     编辑区
//                                 </div>
//                                 <Input.TextArea
//                                     value={editingContent}
//                                     onChange={e => setEditingContent(e.target.value)}
//                                     style={{
//                                         height: 'calc(100% - 42px)',
//                                         width: '100%',
//                                         fontFamily: 'monospace',
//                                         fontSize: 15,
//                                         border: 'none',
//                                         borderRadius: 0
//                                     }}
//                                     placeholder="输入Markdown格式的内容..."
//                                 />
//                             </div>

//                             {/* 实时预览区 */}
//                             <div style={{
//                                 flex: 1,
//                                 border: '1px solid #e8e8e8',
//                                 borderRadius: 8,
//                                 overflow: 'hidden',
//                                 boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
//                             }}>
//                                 <div style={{
//                                     padding: '8px 16px',
//                                     background: '#fafafa',
//                                     borderBottom: '1px solid #eee',
//                                     fontWeight: 500
//                                 }}>
//                                     预览区
//                                 </div>
//                                 <div
//                                     className="markdown-body"
//                                     style={{
//                                         height: 'calc(100% - 42px)',
//                                         overflowY: 'auto',
//                                         padding: 16
//                                     }}
//                                     dangerouslySetInnerHTML={{__html: parsedEditingContent}}
//                                 />
//                             </div>
//                         </div>
//                     ) : docContent ? (
//                         <div
//                             className="markdown-body"
//                             style={{
//                                 maxWidth: '800px', // 限制最大宽度
//                                 width: '100%', // 在小屏幕上自动适应
//                                 padding: '0 20px', // 左右留白
//                                 wordWrap: 'break-word', // 确保长单词自动换行
//                             }}
//                             dangerouslySetInnerHTML={{__html: parsedDocContent}}
//                         />
//                     ) : (
//                         // 没有文档时的提示
//                         <div style={{
//                             display: 'flex',
//                             flexDirection: 'column',
//                             alignItems: 'center',
//                             justifyContent: 'center',
//                             height: '100%',
//                             color: '#999'
//                         }}>
//                             <div style={{fontSize: 20, marginBottom: 16}}>📄</div>
//                             <div>请从左侧选择文档</div>
//                         </div>
//                     )}
//                 </div>
//             </div>


//             {/* 添加分组模态框 */}
//             <Modal
//                 title="新建文档分组"
//                 open={groupModalVisible}
//                 onOk={handleGroupSubmit}
//                 onCancel={() => setGroupModalVisible(false)}
//                 confirmLoading={loading}
//             >
//                 <Form form={groupForm} layout="vertical">
//                     <Form.Item
//                         name="title"
//                         label="分组名称"
//                         rules={[{required: true, message: '请输入分组名称'}]}
//                     >
//                         <Input placeholder="请输入分组名称"/>
//                     </Form.Item>
//                 </Form>
//             </Modal>

//             {/* 添加文档模态框 */}
//             <Modal
//                 title="新建文档"
//                 open={documentModalVisible}
//                 onOk={handleDocumentSubmit}
//                 onCancel={() => setDocumentModalVisible(false)}
//                 confirmLoading={loading}
//                 width={600}
//             >
//                 <Form form={documentForm} layout="vertical">
//                     <Form.Item
//                         name="title"
//                         label="文档标题"
//                         rules={[{required: true, message: '请输入文档标题'}]}
//                     >
//                         <Input placeholder="请输入文档标题"/>
//                     </Form.Item>
//                     <Form.Item
//                         name="content"
//                         label="文档内容 (Markdown格式)"
//                         rules={[{required: true, message: '请输入文档内容'}]}
//                     >
//                         <Input.TextArea
//                             placeholder="请输入Markdown格式的文档内容"
//                             rows={10}
//                             style={{fontFamily: 'monospace'}}
//                         />
//                     </Form.Item>
//                 </Form>
//             </Modal>

//             {/* 添加导入文档模态框 */}
//             <Modal
//                 title="导入文档"
//                 open={importModalVisible}
//                 onOk={handleImportSubmit}
//                 onCancel={() => {
//                     setImportModalVisible(false);
//                     setFileList([]);
//                     importForm.resetFields();
//                 }}
//                 confirmLoading={importLoading}
//                 okText="导入"
//                 cancelText="取消"
//             >
//                 <Form form={importForm} layout="vertical">
//                     <Form.Item
//                         name="file"
//                         label="选择Markdown文件"
//                         rules={[{ required: true, message: '请选择要导入的文件' }]}
//                     >
//                         <Upload.Dragger {...uploadProps}>
//                             <p className="ant-upload-drag-icon">
//                                 <InboxOutlined />
//                             </p>
//                             <p className="ant-upload-text">点击或拖拽文件到此处上传</p>
//                             <p className="ant-upload-hint">
//                                 仅支持 .md 格式文件，文件大小不超过2MB
//                             </p>
//                         </Upload.Dragger>
//                     </Form.Item>

//                     <Form.Item
//                         name="title"
//                         label="文档标题（可选）"
//                         tooltip="如果不填写，将使用文件名作为标题"
//                     >
//                         <Input placeholder="输入文档标题" />
//                     </Form.Item>
//                 </Form>
//             </Modal>
//         </div>
//     );
// };

// export default DocGroupView;
import React from 'react';
const DocGroupView: React.FC = () => {
    return (
        <div>
            <h1>DocGroupView</h1>
            <p>This component appears to be obsolete and its functionality has been moved to HomePage, GroupSidebar, and DocumentView components.</p>
        </div>
    );
};

export default DocGroupView;